<!DOCTYPE html>
<html lang="en">
	<head>
	
    <title>CBE PMP Toolkit - Device Instance Summary</title>

    <link href="/static/bootstrap/css/bootstrap.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="/static/pmp/css/plot.css"/>
    <script type="text/javascript" src="/static/jquery-1.7.2/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="/static/sessvars/sessvars.js"></script>
    <script src="/static/bootstrap/js/bootstrap.min.js"></script>
    <script src="http://www.openlayers.org/api/2.11/OpenLayers.js" type="text/javascript"></script>
    <script type="text/javascript" src="/static/olwidget/js/olwidget.js"></script>
    <link rel="stylesheet" type="text/css" href="http://openlayers.org/api/2.11/theme/default/style.css">
    <link rel="stylesheet" media="all" type="text/css" href="/static/olwidget/css/olwidget.css">
    <script type="text/javascript">
    	$(document).ready(function(){
	    	projectId = '{{ projectId }}'
	    	var floor = $('select#id_floor').find("option:selected").val();
	    	$('#id_floor').change(function(){
				sessvars.sessionObj = {'projectId': projectId}
				var floor = $(this).val()
				getMap(projectId, floor);
			});
			$('#chartImageCheck').click(function(){
	    		if ($(this).is(':checked')){
					$.ajax({
						type: "GET",
						url: '/pmp/utils/',
						data: {'utilType': 'chart_image', 'map':true, 'mapSummary': true},
						success: function(data){
							$('#chartImageSave').html(data)
							$('#chartImageSave').show()
						}
					});
	    		}
	    		else { $('#chartImageSave').hide(); }
	    	});
			getMap(projectId, floor)
		})
		function getMap(projectId, floor){
			$.ajax({
					type: "GET",
					url: '/pmp/utils/',
					data: {'floorId': floor, 'projectId': projectId, 'utilType': 'deviceInstanceFlrChange'},
					success: function(data){
						$('#map').html(data)
					}
				});
		}
    </script>
  <body>
	
        {% load widget_tweaks %}
        <div class="row-fluid">
        	<div class="span8" style="padding: 10px">
        	<h3>Device Instances Summary</h3><br>
	       		{{ deviceFS.management_form }}
	       	<h4>Map summary</h4><br>
	       	{{ flr_model }}
	       	<div id="map"></div>
			<div id="legend"></div><br>
			<div id="chartImage">
    			<label class="checkbox"><input type="checkbox" id="chartImageCheck">Save map image to database for detailed report helper</label>
    			<div id="chartImageSave"></div>
    		</div>
			<h4>Table summary (all floors)</h4><br>
		<table border="0" cellpadding="0" cellspacing="0">
			<tbody>	
				<tr class="spaceUnder">
					<td>Device</td>
					<td>Start time</td>
					<td>End time</td>
					<!--<td>Notes</td>-->
				</tr>
	        	{% for form in deviceFS %}
	        	{{ form.id }}
	        		<tr>
	        			<td>{{ form.device|add_class:"form-inline span2" }}</td>
	        			<td>{{ form.start_time|add_class:"form-inline span3" }}</td>
	        			<td>{{ form.end_time|add_class:"form-inline span3" }}</td>
	    				<!--<td>{{ form.notes|add_class:"form-inline span2" }}</td>-->
	    			</tr>
	    		{% endfor %}
			</tbody>
		</table><br>
	    </div><!--/span-->
      </div><!--/row-->

  </body>  
</html>